<template>
  <van-nav-bar>
    <template #left>
      <div class="navbar-left-text">运动步数</div>
    </template>
    <template #right>
      <div class="collect-btn">
        <van-icon name="star-o" size="20" />
        收藏
      </div>
      <div class="collect-btn">
        <van-icon name="ellipsis" size="20" />
        <van-icon class="ml15" name="close" size="20" />
      </div>
    </template>
  </van-nav-bar>
  <div>
    <div class="header-background-image">
      <img
        class="info-icon"
        src="@/assets/info.png"
        alt=""
        @click="toMessage"
      />
      <img
        class="backup-icon"
        src="@/assets/backups.png"
        alt=""
        @click="clickToast"
      />
      <Bubble
        v-for="(item, index) in bubbleArr"
        :key="item.left"
        :bubbleData="item"
        :keyIndex="index"
        @onClickBubble="addGoldNum"
      />
      <div class="righe-amount">
        <img src="@/assets/glod.png" alt="" />
        <span class="righe-amount-text">{{ goldNum }}</span>
      </div>
      <div class="right-sign-in" @click="signIn">
        <van-badge :dot="!signInDot" :offset="[-5, 3]">
          <img src="@/assets/signin.png" alt="" />
        </van-badge>
        <span>{{ signInDot ? '已签到' : '未签到' }}</span>
      </div>
      <div class="ellipse">
        <div class="today-steps-title">今日步数</div>
        <div class="today-steps-num">2748</div>
        <div class="notice-info">每日24:00自动清零</div>
        <img class="boy-location" src="@/assets/boy.png" alt="" />
        <img class="girl-location" src="@/assets/girl.png" alt="" />
        <div class="bonus-btn">
          <span>瓜分888现金</span>
        </div>
      </div>
    </div>
    <div class="content-list">
      <div class="second-title pdt30">租币当钱花</div>
      <div class="row-img-box">
        <img
          v-for="(item, index) of crossSlipImgUrl"
          :key="index"
          :src="item"
          @click="toStorePage"
        />
      </div>
      <div class="product-recommend">
        <div class="second-title pdt28">租物推荐</div>
        <div class="commodity-list">
          <CommodityCard
            v-for="(item, index) of productList"
            :key="index"
            :product="item"
          />
          <div class="footer-btn" @click="viewMore">
            <div class="footer-text">
              查看更多
              <van-icon name="arrow" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <Popup :showToast="showToast" @closePopup="closePopup" />
  </div>
</template>

<script lang="ts" setup>
import CommodityCard from './components/commodity-card.vue'
import Popup from './components/popup-context.vue'
import Bubble from './components/bubble-btn.vue'
import { productList, bubbleArr } from './init-data'
import pic_shop from '@/assets/pic_shop@3x.png'
import pic_task from '@/assets/pic_task@3x.png'
import pic_cash from '@/assets/pic_cash@3x.png'
import { useRouter } from 'vue-router'
import { ref, onUnmounted } from 'vue'

const router = useRouter()
const goldNum = ref(32)
const signInDot = ref(false)
const showToast = ref(false)
const crossSlipImgUrl = [pic_shop, pic_task, pic_cash, pic_shop]

window.addEventListener('scroll', eventscorll)

onUnmounted(() => {
  window.removeEventListener('scroll', eventscorll)
})

function toStorePage() {
  router.push({ path: '/store' })
}

function addGoldNum([addNum, keyIndex]: number[]) {
  goldNum.value += addNum
    bubbleArr.splice(keyIndex, 1)
}

function eventscorll() {
  if (window.scrollY + window.innerHeight >= document.body.offsetHeight - 5) {
    viewMore()
  }
}

function viewMore() {
  productList.push(...productList)
}

function signIn() {
  signInDot.value = !signInDot.value
}

function clickToast() {
  showToast.value = true
}

function closePopup() {
  showToast.value = false
}

function toMessage() {
  router.push({ path: '/message' })
}
</script>

<style lang="scss" scoped>
.product-recommend {
  background: #f7f8f9;
}
.navbar-left-text {
  font-size: 18px;
}

.collect-btn {
  margin-left: 5px;
  padding: 3px 12px;
  border-radius: 50px;
  border: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--van-nav-bar-icon-color);
}

.header-background-image {
  width: 100%;
  height: 396px;
  background: url('../../public/static/bg.png') no-repeat;
  position: relative;
  background-size: cover;
}

.info-icon {
  position: absolute;
  top: 19px;
  left: 10px;
}

.backup-icon {
  position: absolute;
  top: 60px;
  left: 10px;
}

.righe-amount {
  position: absolute;
  top: 20px;
  right: 0px;
  display: flex;
  justify-content: left;
  align-items: center;
  width: 70px;
  height: 30px;
  background-color: #ffffffbe;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding-left: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #027c64;
  img {
    margin-top: 2px;
  }
}

.right-sign-in {
  position: absolute;
  top: 62px;
  right: 0px;
  display: flex;
  justify-content: left;
  align-items: center;
  width: 70px;
  height: 30px;
  background-color: #ffffffbe;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  padding-left: 5px;
  font-size: 11px;
  color: #027c64;
  .van-badge__wrapper {
    margin-top: 2.5px;
  }
}

.ellipse {
  position: absolute;
  left: 105px;
  right: 105px;
  top: 173.5px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255),
    rgba(255, 255, 255, 0.014)
  );
  border-radius: 50%;
  height: 165px;
  text-align: center;

  .today-steps-title {
    position: absolute;
    top: 20px;
    left: 55.5px;
    right: 55.5px;
    font-size: 12px;
    color: #999999;
  }

  .today-steps-num {
    position: absolute;
    top: 33px;
    left: 30px;
    right: 30px;
    height: 55px;
    font-size: 45px;
    font-weight: bold;
    color: #084f3e;
    overflow: hidden;
  }

  .notice-info {
    position: absolute;
    top: 93px;
    left: 29px;
    right: 29px;
    font-size: 12px;
    color: #999999;
  }

  .boy-location {
    position: absolute;
    left: 0px;
    bottom: 42.5px;
  }

  .girl-location {
    position: absolute;
    right: -9px;
    bottom: 42.5px;
  }

  .bonus-btn {
    position: absolute;
    bottom: 0px;
    width: 225px;
    height: 44px;
    border-radius: 30px;
    background: linear-gradient(0, #fa5721, #ffa901);
    transform: translateX(-(225px - 165px)/2);
    line-height: 44px;
    color: #fff;
    font-size: 20px;
  }
}

.content-list {
  position: relative;
  width: 100%;
  background: #ffffff;
  margin-top: -37px;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;

  &::after {
    content: '';
    width: 30px;
    height: 5px;
    background: #e2e2e2;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2.5px;
  }
}

.second-title {
  font-size: 18px;
  margin-left: 15px;
}

.row-img-box {
  display: flex;
  overflow-x: auto;
  padding: 10px;
  padding-bottom: 15px;

  img {
    height: 120px;
    width: 100px;
    display: inline-block;
    white-space: nowrap;
    margin: 0 2.5px;
  }
}

.footer-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0 30px 0;

  .footer-text {
    width: 134px;
    height: 30.5px;
    line-height: 30.5px;
    text-align: center;
    border-radius: 50px;
    border: 0.5px solid #999;
    color: #999;
    font-size: 15px;
  }
}
</style>
